<template>
  <div class="container">
    <div v-if="identityList.length > 0">
      <el-table
          :data="identityList"
          border
          stripe
          style="width: 100%">
        <el-table-column
            prop="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="hospital"
            label="工作地点">
        </el-table-column>
        <el-table-column
            prop="proof"
            label="工作证明">
          <template slot-scope="scope">
            <el-image :preview-src-list="[scope.row.proof]" :src="scope.row.proof"
                      style="width: 100px; height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="认证状态">
          <template slot-scope="scope">
            <el-tag :type="statusType[scope.row.status]" effect="dark">{{ statusText[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        0
        <el-table-column
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="passIdentityInfo(scope.row)" type="text" size="small">通过</el-button>
            <el-button @click="returnIdentityInfo(scope.row)" type="text" size="small">退回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-empty></el-empty>
    </div>

    <el-dialog
        title="退回认真请求"
        :visible.sync="showReasonDialog"
        width="30%">
      <el-form label-width="auto">
        <el-form-item label="退回原因">
          <el-input v-model="reason" type="textarea" placeholder="请填写退回原因" resize="none"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showReasonDialog = false">取 消</el-button>
        <el-button type="primary" @click="dealIdentityInfo(1,reason)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {dealIdentity, getAllIdentity} from "@/api/login";

export default {
  name: 'IdentityAuthentication',
  data() {
    return {
      // 是否显示填写退回原因窗口
      nowItem: {},
      showReasonDialog: false,
      reason: '',
      identityList: [],
      statusType: {
        0: 'info',
        1: 'success',
        2: 'danger'
      },
      statusText: {
        0: '未处理',
        1: '已通过',
        2: '已退回'
      },
      // 认证结果表
      resultForm: {
        certificationId: '',
        username: '',
        status: '',
        reason: ''
      }
    }
  },
  mounted() {
    this.getIdentityList();
  },
  methods: {
    // 获取所有待身份验证或者身份验证不通过的数据
    getIdentityList() {
      getAllIdentity().then(res => {
        this.identityList = res.data;
      })
    },
    dealIdentityInfo(status, reason) {
      this.resultForm.status = status;
      this.resultForm.reason = reason;
      dealIdentity(this.resultForm).then(res => {
        this.$message.success('处理成功');
        this.getIdentityList();
        this.showReasonDialog = false;
      })
    },
    passIdentityInfo(row) {
      this.resultForm.certificationId = row.id;
      this.resultForm.username = row.username;
      this.dealIdentityInfo(0, null)
    },
    returnIdentityInfo(row) {
      this.resultForm.certificationId = row.id;
      this.resultForm.username = row.username;
      this.dealIdentityInfo(1, this.reason)
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes MoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  height: 100%;
  width: 100%;
  animation: MoveIn .7s cubic-bezier(.4, 0, .2, 1);
}
</style>